<template>
	<view class="main">
		<u-navbar
		title=" " 
		:is-back="false"
		title-size="34"
		:border-bottom="false"
		:background="background">
			<view class="header">
				<u-icon name="arrow-left" size="28" @tap="black"></u-icon>
				<view class="title">添加里程碑</view>
				<view class="ritbtn" @tap="cancel">取消</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="240" :label-style="label_style">
				<view class="item">
					<u-form-item label="里程碑标题" prop="name" :border-bottom="false">
						<u-input v-model="form.name" />
					</u-form-item>
				</view>
				
				<view class="item">
					<u-form-item label="请选择负责人" prop="intro">
						<view class="principal">
							<view class="prin-item active">Lee Yan</view>
							<view class="prin-item">喵不可言</view>
							<view class="prin-item">Lee Yan</view>
							<view class="prin-item">喵不可言</view>
						</view>
					</u-form-item>
					<u-form-item label="请选择交付时间" prop="intro" :border-bottom="false">
						<u-input 
						disabled 
						input-align="right"
						v-model="form.intro" 
						placeholder="请选择日期" 
						@tap="dateshow=!dateshow"/>
						<u-icon name="arrow-right" color="#C7C7C7" size="28"></u-icon>
					</u-form-item>
				</view>
			</u-form>
			<button class="add-btn" @click="submit">确认添加</button>
		</view>
		<!-- 日期弹窗 -->
		<u-calendar 
		v-model="dateshow" 
		:min-date="minDate"
		max-date="2050-01-01"
		mode="date"></u-calendar>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				label_style:{
					fontSize: '28rpx',
					color: '#333333',
					lineHeight: '40px'
				},
				minDate:'',
				dateshow:false,//是否展示日期弹窗
				form: {
					name: '',
					intro: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.minDate = this.dateFormat(new Date())
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 取消
			cancel(){
				
			},
			//返回
			black(){
				uni.navigateBack()
			},
			toPage(url,islogin=false){
				this.more_show = false
				if(islogin){
					uni.navigateTo({
					    url: '/pages/Login/index'
					});
					return
				}
				uni.navigateTo({
				    url: url
				});
			},
			// 日期格式化
			dateFormat(e){
				let date = e
				let Y = date.getFullYear()
				let M = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
				let D = date.getDate()<10?`0${date.getDate()}`:date.getDate()
				console.log(Y,M,D)
				return `${Y}-${M}-${D}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		padding:30rpx;
		background-color: #f9f9f9;
		.header{
			padding: 0 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
			.title{
				font-size: 34rpx;
			}
			.ritbtn{
				font-size: 28rpx;
				position: relative;
				z-index: 999999;
			}
		}
		.content{
			.item{
				padding:0 20rpx;
				background-color: #FFFFFF;
				margin-bottom: 30rpx;
				border-radius: 8rpx;
				.principal{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.prin-item{
						display: inline-block;
						margin: 10rpx 15rpx;
						height: 52rpx;
						padding: 0rpx 20rpx;
						color: #333333;
						background: #F9F9F9;
						border-radius: 26rpx;
						font-size: 28rpx;
						line-height: 52rpx;
					}
					.active{
						color: #FFFFFF;
						background: #4A90E2;
					}
				}
			}
			.add-btn{
				height: 100rpx;
				background: #4A90E2;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 100rpx;
				margin-top: 60rpx;
				&::after{
					border: 0;
				}
			}
		}


		
	}
</style>
